# -*- mode: snippet -*-
# contributor: Chen Bin <chenbin DOT sh AT gmail>
# name: angular-ui+angular-router+bootstrap+mokcup+promise
# expand-env: ((yas-indent-line 'fixed))
# key: html5.
# --
<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <title>Angular Sandbox (with Bootstrap)</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-mocks.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
    <style type="text/css">.nav, .pagination, .carousel, .panel-title a { cursor: pointer; } /* angular ui bootstrap hack */</style>
  </head>
  <body>
    <div class="container" ng-controller="MainCtrl">
      <h1>{{message}}</h1>
    </div>
    <div ng-view></div>
    <script type="text/javascript">
     angular.module('myApp', ['ui.bootstrap', 'ngRoute', 'ngMockE2E']).config(['$routeProvider', function($routeProvider) {
       $routeProvider.when('/index', {
         template: '<div>This is main.html</div><div><button ng-click="good()">Good</button><button ng-click="bad()">Bad</button><button ng-click="helloWorld()">hello world</button></div>',
         controller: 'MainCtrl'
       }).otherwise({
         redirectTo: '/index'
       });
     }]).run(function($httpBackend) {
       // HTTP status: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
       // hack $http
       $httpBackend.whenPOST('MY_POST_URL1').respond(200, {hello:'hello'});
       $httpBackend.whenPOST('MY_POST_URL2').respond(function(method, url, data, headers){
         return [400, {bye: 'bye'}, {}];
       });
       $httpBackend.whenPOST('MY_POST_URL3').respond(function(method, url, data, headers){
         return [200, {world: 'world'}, {}];
       });
       $httpBackend.whenGET(/^.*/).passThrough();
     }).controller('MainCtrl', ['$scope', '$http', '$q', function ($scope, $http, $q) {
       var deferred = $q.defer();
       $scope.message = 'Hello World';

       $scope.good = function() {
         console.log('$scope.good called!');
         var p = $http.post('MY_POST_URL1');

         p.then(function(resp) {
           console.log('resp=', resp);
         }).catch(function(reason) {
           console.log('reason=', reason);
         });
       };

       $scope.bad = function() {
         console.log('$scope.bad called!');
         var p = $http.post('MY_POST_URL2');
         p.then(function(resp) {
           console.log('resp=', resp);
         }).catch(function(reason) {
           console.log('reason=', reason);
         });
       };

       $scope.helloWorld = function() {
         console.log('helloWorld called');
         var p = $http.post('MY_POST_URL1');

         p.then(function(resp) {
           console.log('resp=', resp);
           if(resp.data.hello === 'hello') {
             // often true
             deferred.reject({hello:'reject'});
             return deferred.promise; // will jump to catch(...)
           }
           return $http.post('MY_POST_URL2');
         }).then(function(resp){
           console.log('final resp=', resp);
         }).catch(function(reason) {
           console.log('reason=', reason);
         });
       };
     }]);
    </script>
  </body>
</html>